<template>
	<sl-page :isDisplay="false" :safeBottom="true">
		<view class="shop-tab" :style="'padding-top:'+statusBarHeight+'px'">
			<sl-sticky>
				<view class="flex flex-y-center search-box">
					<Search class="search-item" searchName="请输入关键字搜索..." targetPage="xj_shop/goods/index">
						<view slot="left" class="search-image">
							<sl-image :value="avatar" mode="aspectFit"></sl-image>
						</view>
					</Search>
					<view class="scan" @click="scan">
						<uni-icons type="scan" size="28"></uni-icons>
					</view>
				</view>
			</sl-sticky>
		</view>
		<z-paging ref="paging" :paging-style="{'padding-top':top + 'px'}" v-model="goodsList" @query="loadPage"
			:auto="false">
			<!-- 轮播 -->
			<uni-swiper-dot class="swiper" :info="swiperList" :current="current" :mode="mode" :dotsStyles="dotsStyles">
				<swiper class="swiper-box" @change="change" :style="'margin-top:' +(50+statusBarHeight)+'px'">
					<swiper-item v-for="(item ,index) in swiperList" :key="index">
						<view class="swiper-item">
							<sl-image :value="item.content"></sl-image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- 分类 -->
			<GridCategory ref="gridCategory" col="4" :datas="category.datas" @gridCategory:click="toTargetGoods">
			</GridCategory>
			<!-- <view class="unlock-members">
				升级会员，解锁更多权益
			</view> -->
			<!-- 商品 -->
			<view class="page-goods">
				<Goods ref="goods" :gridDatas="goodsList" />
			</view>
		</z-paging>
	</sl-page>
</template>

<script>
	import CategoryApi from '@/api/category/category.js';
	import GoodsApi from '@/api/goods/goods.js';
	import InviteApi from '@/api/invite/invite.js';
	import Constants from '@/constants';
	import Scroll from '@/components/mixins/scroll.js';
	import * as Util from '@/utils/index.js';
	import Search from '@/pages/components/search/search.vue';
	import GridCategory from '@/pages/components/category/category.vue';
	import Goods from '@/pages/components/goods/goods.vue';
	//
	export default {
		//
		name: 'pageGoods',
		//
		mixins: [Constants],
		//
		components: {
			Search,
			GridCategory,
			Goods,
		},
		//
		data() {
			return {
				top: '',
				goodsList: [],
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				//轮播
				swiperList: [{
					content: 'https://orangestargame.oss-cn-shenzhen.aliyuncs.com/static/swipeOne.png',
				}, {
					content: 'https://orangestargame.oss-cn-shenzhen.aliyuncs.com/static/swipeOne.png',
				}, {
					content: 'https://orangestargame.oss-cn-shenzhen.aliyuncs.com/static/swipeOne.png',
				}],
				current: 0,
				mode: 'round',
				dotsStyles: {
					bottom: '20',
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(255, 255, 255, 0.3) solid',
					selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)',
					selectedBorder: '1px rgba(255, 255, 255, 0.9) solid'
				},
				//查询参数
				query: {},
				//
				search: {},
				showSearch: false,
				//
				category: {},
				showCategory: false,
				//商品
				goods: {},
				showGoods: false,

			};
		},
		//
		props: {
			//
			items: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		//
		mounted() {
			uni.createSelectorQuery().select('.shop-tab').boundingClientRect(data => {
				this.top = data ? data.height : 0;
			}).exec();
			//挂在查询组件
			this.search = this.items.search;
			if (!Util.isEmptyObject(this.search)) {
				this.showSearch = true;
			}
			//挂在分类组件
			this.category = this.items.category;
			if (!Util.isEmptyObject(this.category)) {
				this.$set(this.category, 'datas', []);
				this.loadCategory();
				this.showCategory = true;
			}
			//挂在商品组件
			this.goods = this.items.goods;
			if (!Util.isEmptyObject(this.goods)) {
				this.$refs.paging.reload();
				this.showGoods = true;
			}
		},
		//
		methods: {
			//加载商品分类
			loadCategory: async function() {
				let res = await CategoryApi.queryOne(this.categoryType.goods);
				for (let i = 0; i < res.obj.length; i++) {
					this.category.datas.push({
						...res.obj[i]
					});
				}
			},
			//加载商品
			loadPage: async function() {
				try {
					const res = await GoodsApi.query(this.query, this.param);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					this.$refs.paging.complete(false);
				}
			},
			//轮播
			change(e) {
				this.current = e.detail.current;
			},
			//跳转商品页
			toTargetGoods(item) {
				this.$app.navTo(this.pages.goodsIndexPage, {
					categoryId: item.id,
					categoryName: item.name,
				});
			},
			//扫码
			scan() {
				//判断是否已登录
				this.isLogin = !!this.$store.getters.token;
				//获取页面数据
				if (this.isLogin) {
					const app = this;
					//调起条码扫描
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							// console.log('【page：scan，条码类型是】:', res.scanType)
							// console.log('【page：scan，条码结果是】:', res.result)
							var jsonObject = JSON.parse(res.result); // 将字符串转换为JSON对象

							// const inviteRes = InviteApi.invite(jsonObject.shareId);
							// console.log('inviteRes: -----------------',inviteRes);

							InviteApi.invite(jsonObject.shareId).then((res) => {
								console.log('inviteRes: -----------------', res);
								if (res.success) {
									//推广商品
									if (jsonObject.shareType == 9) {
										app.$app.navTo(jsonObject.targetPage, {
											goodsId: jsonObject.productId
										});
									}
									//招募顾客
									if (jsonObject.shareType == 1) {
										app.$app.navTo(jsonObject.targetPage);
									}
									//招募分销
									if (jsonObject.shareType == 2) {
										//
										app.$app.navTo(jsonObject.targetPage);
										//
									}
								} else {
									//todo扫码后出现问题
									console.log('app: ------------1---------没有登录');
								}
							})
						}
					});
				} else {
					this.$app.toast('请先登陆系统')
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.shop-tab {
		z-index: 20;
		background: #FFF;

		.search-box {
			padding: 10rpx 0;

			.search-item {
				flex: 1
			}

			.scan {
				margin: 0rpx 10rpx;
				padding-right: 185rpx;
			}
		}
	}

	.search-image {
		position: relative;
		width: 60rpx;
		height: 72rpx;
		overflow: hidden;
		margin: 0rpx 16rpx;
	}


	.swiper {
		background-color: $uni-bg-color;

		.swiper-box {
			height: 392rpx;
			margin: 10px 0px;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 24rpx 32rpx;
			// #ifdef MP-WEIXIN
			margin-top: 190rpx;
			// #endif
		}
	}

	.unlock-members {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		font-weight: 400;
		height: 84rpx;
		width: 100%;
		// background-color: $uni-bg-color;
		border-radius: 39px;
		background: #fff;
		box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.08);
	}

	.page-goods {
		background: $uni-bg-color-grey;
		padding: 12rpx 32rpx;
	}
</style>